<template>
  <el-form ref="form" :model="form" label-width="100px">
    <fieldset>
      <el-form-item label-width="50%">
        <!--action  请求后台接口 -->
        <el-upload
          class="avatar-uploader"
          action="/api/consumerUpload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="form.cimage" :src="form.cimage" v-modle="form.cimage" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <el-form-item label="ID" >
        <el-input v-model="form.cid"></el-input>
      </el-form-item>

      <el-form-item label="姓名">
        <el-input v-model="form.cname"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="form.cpass"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-radio-group v-model="form.csex">
          <el-radio label="男">男</el-radio>
          <el-radio label="女">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="联系方式">
        <el-input v-model="form.ctel"></el-input>
      </el-form-item>
      <el-form-item label="详细地址">
        <el-input v-model="form.caddress"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="form.email"></el-input>
      </el-form-item>
      <!--        <el-form-item label="即时配送">-->
      <!--          <el-switch v-model="form.delivery"></el-switch>-->
      <!--        </el-form-item>-->
      <el-form-item style="text-align: center">
        <el-button type="primary" size="small" round @click="update">提交</el-button>
        <el-button type="info" size="small" round @click="">取消</el-button>
      </el-form-item>
    </fieldset>
  </el-form>
</template>

<script>
  import axios from "axios";

  export default {
    data() {
      return {
        form: {
          cid:'',
          cname: '',
          cpass: '',
          csex: '',
          ctel: '',
          cimage: '',
          caddress: '',
          email: '',
        }
      }
    },
    mounted() {
      var cid = this.$route.params.cid

      // alert(cid);
      //
      // console.log(cid)
      //通过id 去后台进行查询数据
      axios.get("/api/findByCid/" + cid).then(res => {
        this.form = res.data
        // alert(this.form.cname)
      })
      this.form = {
        cid:'',
        cname: '',
        cpass: '',
        csex: '',
        ctel: '',
        cimage: '',
        caddress: '',
        email: '',
      }
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.cimage = URL.createObjectURL(file.raw);
        this.form.cimage = res;
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      },
      update: function () {

        axios.post("/api/updateConsumer", this.form).then(res => {

          if (res.data == "1") {
            this.$router.push("/consumer");
          } else {
            // alert("修改失败!!!!");
            this.$message.error(res.data.message);
          }
        })
      }
    }

  }
</script>

<style scoped>
  /*fieldset {*/
  /*  !* 表单页面居中，宽度50% ,legend颜色设置，legend圆角*!*/
  /*  border: 2px solid #DCDFE6;*/
  /*  text-align: left;*/
  /*  border-radius: 8px;*/
  /*  margin: 0 auto;*/
  /*  width: 50%;*/
  /*}*/
  .avatar-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 178px;
  }

  .avatar-uploader :hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
